<template>
  <div class="drawerBody" v-loading="relationLoading" style="display: flex; flex-direction: column;">
    <!--未知素材-->
    <div>
      <div class="relation-label">
        未知素材
      </div>
      <el-row :gutter="20" style="display: flex;margin: 1em auto 1em auto;overflow-x: scroll">
        <div style="display: flex;">
          <div v-for="(item, index) in notfoundCreativeList" :key="index"
               style="width: 220px;height: 100%;margin-right: 1em">
            <el-image v-if="item.type === 0" :src="getUrl(item)"
                      style="width: 200px;height: 200px" fit="contain"></el-image>
            <video v-if="item.type === 1" :src="getUrl(item)"
                   style="width: 200px;height: 200px"></video>
          </div>
        </div>
        <div v-if="notfoundCreativeList.length === 1">
          <div class="creative-border">
            <div class="creative-label">素材名称 :</div>
            {{ notfoundCreativeList[0].name }}
          </div>
          <div class="creative-border">
            <div class="creative-label">订单名 :</div>
            {{ offerName }}
          </div>

          <div class="creative-border">
            <div class="creative-label">媒体 :</div>
            <div style="display: flex;">
              <div style="width: 20px;margin-right: 4px"
                   v-for="(item,index) in platformLogo(notfoundCreativeList[0].platformList)"
                   :key="index">
                <img style="width: 100%" :src="item.url" :title="item.name">
              </div>
            </div>
          </div>
          <div class="creative-border">
            <div class="creative-label">投放地区 :</div>
            {{ notfoundCreativeList[0].countryList }}
          </div>
        </div>
      </el-row>
    </div>
    <!--关联素材-->
    <div style="margin-top: 10px;">
      <div class="relation-label">
        关联素材
      </div>
      <el-row v-if="relation.relateCreative && relation.relateCreative.id" style="display: flex">
        <div style="max-height: 223px;display: flex;">
          <div style="width: 220px;height: 100%;margin-right: 1em">
            <el-image v-if="relation.relateCreative.type === 0" :src="relation.relateCreative.creativeUrl"
                      style="width: 200px;height: 200px" fit="contain"></el-image>
            <video v-if="relation.relateCreative.type === 1" :src="relation.relateCreative.creativeUrl"
                   style="width: 200px;height: 200px"></video>
          </div>
        </div>
        <div>
          <div class="creative-border">
            <div class="creative-label">短ID :</div>
            {{ relation.relateCreative.shortId }}
          </div>
          <div class="creative-border">
            <div class="creative-label">素材名称 :</div>
            {{ relation.relateCreative.name }}
          </div>
          <div class="creative-border">
            <div class="creative-label">本地文件名 :</div>
            {{ relation.relateCreative.localFilename }}
          </div>
          <div class="creative-border">
            <div class="creative-label">订单名 :</div>
            {{ relation.offer.offerName }}
          </div>
          <div class="creative-border">
            <div class="creative-label">设计师 :</div>
            {{  designerChange(relation.relateCreative.designer) }}
          </div>
          <div class="creative-border">
            <div class="creative-label">媒体 :</div>
            <div style="display: flex;">
              <div style="width: 20px;margin-right: 4px"
                   v-for="(item,index) in platformLogo(relation.relateCreative.platform)"
                   :key="index">
                <img style="width: 100%" :src="item.url" :title="item.name">
              </div>
            </div>
          </div>
          <div class="creative-border">
            <div class="creative-label">投放地区 :</div>
            {{ relation.relateCreative.country }}
          </div>
        </div>
      </el-row>
    </div>
    <!-- 手动匹配-->
    <el-row style="">
      <div v-if="relation.relateCreative == null || relation.relateCreative.id == null"
           style="color: #999999;font-size: 14px;margin-left: 2em">系统匹配不到可关联素材，您还可以手动匹配或者将未知素材入库
      </div>
      <div v-else style="color: #999999;font-size: 14px;margin-left: 2em; margin-top: 1em">推荐关联素材不准确，您还可以手动匹配或者将未知素材入库</div>
      <el-row style="margin-left: 2em;margin-top: 1em">
        <el-button size="small" type="primary" plain @click="handlerMatch" style="width: 85px">手动匹配</el-button>
        <el-button size="small" type="success" plain @click="handlerPut" style="width: 85px">入库</el-button>
      </el-row>
    </el-row>
    <el-row style="display: flex;justify-content: center;margin-top: 2em">
      <el-button type="primary" size="small" @click="handlerRelation">关联</el-button>
      <el-button size="small" @click="closeRelation">取消</el-button>
    </el-row>

    <notfound-search-creative
      ref="searchCreative"
      :drawer-visible="searchVisible"
      :offerId="offerId"
      @close="closeSearch"
      @select="selectCreative"
    >
    </notfound-search-creative>
  </div>
</template>

<script>

import {getRelationCreative, relateCreative} from "@/api/creativeReport/notFoundCreative"
import {getDesigner} from "@/api/offer/creative";
import {platformLogo} from "@/util/beetles";
import NotfoundSearchCreative from "@/views/creativeReport_bc/notfoundComponents/notfoundSearchCreative";

export default {
  name: "notfoundRelation",
  components: {NotfoundSearchCreative},
  props: {
    notfoundCreativeList: {
      type: Array
    }
  },
  data() {
    return {
      offerId: '',
      offerName: '',
      designerList: [],
      relation: {},
      searchVisible: false,
      relationLoading: false,
    }
  },
  created() {
    getDesigner(this.offerId).then(res => {
      this.designerList = res.data.data;
    });
  },
  methods: {
    /**
     * 获取推荐关联素材
     */
    initRelation(offer) {
      let names = []
      let assetIds = [];
      this.offerId = offer.id;
      this.offerName = offer.name;
      this.notfoundCreativeList.map(item => {
        names.push("'" + item.name + "'");
        assetIds.push("'" + item.assetId + "'");
      })
      getRelationCreative(names.join(','), '', assetIds.join(',')).then(res => {
        this.relation = res.data.data
      })
    },
    /**
     * 手动匹配
     */
    handlerMatch() {
      this.searchVisible = true
      this.$nextTick(() => {
        this.$refs.searchCreative.submitForm()
      });

    },
    /**
     * 入库
     */
    handlerPut() {
      this.$emit('handle-put', this.notfoundCreativeList[0])
    },
    platformLogo(val) {
      return platformLogo(val)
    },
    /**
     * 取消关联
     */
    closeRelation(update) {
      this.$emit('close', update)
    },
    /**
     * 关联
     */
    handlerRelation() {
      if (Object.keys(this.relation.relateCreative).length === 0) {
        this.$message.error("没有可关联的素材")
        return;
      }
      let data = [];
      this.notfoundCreativeList.map(item => {
        let parameter = {};
        parameter.creativeId = this.relation.relateCreative.id;
        parameter.creativeName = this.relation.relateCreative.name;
        parameter.assetId = item.assetId;
        parameter.assetName = item.name;
        parameter.adIds = item.adId;
        parameter.accountId = item.accountId;
        parameter.spend = item.spend;
        parameter.clicks = item.clicks;
        parameter.install = item.install;
        parameter.platform = item.platformList;
        parameter.country = item.countryList;
        parameter.reportDate = item.reportDate;
        data.push(parameter);
      })
      this.relationLoading = true;
      relateCreative(data, true).then(res => {
        this.relationLoading = false;
        this.$message.success("关联素材成功")
        this.closeRelation(true);
      }).catch(e => {
        this.relationLoading = false;
      })

    },
    selectCreative(creative) {
      if (creative) {
        this.relation = creative;
      }
    },

    getUrl(row) {
      return row.obsUrl || row.assetUrl;
    },

    designerChange(val){
      let list = []
      this.designerList.map(item =>{
        val.map(i =>{
          if(i === item.id){
            list.push(item.realName)
          }
        })
      })
      return list.join(',')
    },
    closeSearch(done) {
      this.searchVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.drawerBody {
  width: 95%;
  margin: 0 auto;
  border-top: 1px solid #F0F2F5;
  font-size: 14px;
}

.relation-label {
  margin-top: 1em;
  margin-bottom: 20px;
  font-size: 14px;
}

.creative-border {
  display: flex;
  margin-top: 10px;

  .creative-label {
    font-size: 14px;
    width: 100px;
    text-align: left;
    color: #666666;
  }
}

</style>
